<script setup lang="ts" name="AboutView">
import { nanoid } from "nanoid";
//todoList类型声明
import { type typeTodo } from "@/types/todoList";
import { ref, watch } from "vue";
const todoList = ref<typeTodo[]>([
  // {
  //   id: nanoid(), //id
  //   title: "任务1", //任务名称
  //   checkBox: true, //是否选中
  //   edit: false, //是否修改
  // },
  // {
  //   id: nanoid(), //id
  //   title: "任务2", //任务名称
  //   checkBox: false, //是否选中
  //   edit: false, //是否修改
  // },
  // {
  //   id: nanoid(), //id
  //   title: "任务3", //任务名称
  //   checkBox: false, //是否选中
  //   edit: false, //是否修改
  // },
]);
//获取本次存储的数据，保持数据持久化
todoList.value = JSON.parse(localStorage.getItem("todoList") as string) || [];
//添加任务
const todoInput = ref("");
const addTodo = () => {
  const newList = {
    id: nanoid(),
    title: todoInput.value,
    checkBox: false,
    edit: false,
  };
  const x = todoList.value.every((i) => i.title != todoInput.value);
  if (x) {
    todoList.value = [newList, ...todoList.value];
    todoInput.value = "";
    Allbtn.value = false;
    console.log(todoList.value);
  } else {
    alert("任务已经存在！！！");
    todoInput.value = "";
  }
};
// 根据deit的屬性修改对应的todoList的title
const changeTodo = (item: typeTodo) => {
  if (!item.edit) {
    item.edit = true;
  } else {
    item.edit = false;
  }
  todoList.value = todoList.value.map((i) => {
    if (i.id === item.id) {
      i.title = item.title;
    }
    return i;
  });
  localStorage.setItem("todoList", JSON.stringify(todoList.value));
};
// 根据id删除对应的todoList
const deleteTodo = (id: string) => {
  todoList.value = todoList.value.filter((item) => item.id !== id);
  if (!todoList.value.length) Allbtn.value = false;
};
// 单选框选中事件
const downCheck = (item: typeTodo) => {
  todoList.value = todoList.value.map((i) => {
    if (i.id === item.id) {
      i.checkBox = !i.checkBox;
    }
    return i;
  });
  const all = todoList.value.every((i) => i.checkBox);
  if (all) {
    Allbtn.value = true;
  } else {
    Allbtn.value = false;
  }
};
// 全选按钮
const Allbtn = ref(false); //全选框的状态
const selectAll = (e: any) => {
  Allbtn.value = e.target.checked;

  if (e.target.checked) {
    todoList.value = todoList.value.map((i) => {
      i.checkBox = true;
      return i;
    });
  } else {
    todoList.value = todoList.value.map((i) => {
      i.checkBox = false;
      return i;
    });
  }
};
//清除所有已经完成的任务
const clearAll = () => {
  console.log(todoList.value);
  //单选框选中后，就会被过滤掉
  todoList.value = todoList.value.filter((i) => i.checkBox != true);
  Allbtn.value = false;
};
//监听数据的变化，时时保存到本次存储
watch(todoList, (newVal) => {
  localStorage.setItem("todoList", JSON.stringify(newVal));
});
</script>

<template>
  <div class="container">
    <h1>todoList练习</h1>
    <div class="box">
      <!-- 添加任务 -->
      <div class="addRenwu">
        <input
          type="text"
          v-model="todoInput"
          placeholder="请输入你的任务名称,按回车键确认"
          @keydown.enter="addTodo"
        />
      </div>
      <!-- 任务列表 -->
      <div class="list">
        <ul>
          <li v-for="item in todoList" :key="item.id">
            <div>
              <input
                type="checkbox"
                :checked="item.checkBox"
                @click="downCheck(item)"
              />
              <input v-if="item.edit" type="text" v-model="item.title" />
              <text v-else>{{ item.title }}</text>
            </div>
            <div>
              <button @click="changeTodo(item)">修改</button>
              <button @click="deleteTodo(item.id)">删除</button>
            </div>
          </li>
        </ul>
      </div>
      <!-- 底部 -->
      <div class="foot">
        <div>
          <input type="checkbox" :checked="Allbtn" @click="selectAll" />
          <text>全选</text>
        </div>
        <div>
          <button @click="clearAll">清除已完成的任务</button>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.container {
  width: 600px;
  height: auto;
  margin: 0 auto;
  border: 1px solid gray;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
}
.box {
  width: 500px;
  height: auto;
  border: 1px solid gray;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  /* 添加任务 */
  .addRenwu {
    width: 100%;
    input {
      width: 100%;
      height: 35px;
      box-sizing: border-box;
    }
  }
  /* 任务列表 */
  .list {
    width: 100%;
    /* border: 1px solid gray; */
    ul {
      li {
        height: 30px;
        border-bottom: 1px solid gray;
        line-height: 30px;
        padding: 0 20px;
        margin: 5px 0;
        display: flex;
        justify-content: space-between;
      }
    }
  }
  /* 底部 */
  .foot {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
</style>
